<!DOCTYPE html>
<html lang="en">
<head>
  <title>Azul GUI Framework</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="description" content="Cross-platform Desktop GUI framework for C, C++, Python and Rust, using the Mozilla WebRender rendering engine, licensed MPL-2.0">
  <meta name="keywords" content="gui, rust, user interface">

  <link rel="preload" as="font" crossorigin='anonymous' href="./fonts/SourceSerifPro-Regular.ttf" type="font/ttf">
  <link rel="preload" as="font" crossorigin='anonymous' href="./fonts/Morris Jenson Initialen.ttf" type="font/ttf">

  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
  <link rel="stylesheet" type="text/css" href="./main.css">
  <!-- index.css -->
  <style>
    section.feature {
      display: flex;
      flex-direction: row;
      margin-bottom: 100px;
    }
   .col-1 {
      width: 100%;
      max-width: 500px;
      clear: both;
      display: inline-block;
      padding-right: 20px;
    }
    .col-1 img {
      width: 100%;
      max-width: 500px;
      height: auto;
    }
    .col-2 {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      min-width: 500px;
    }

    main header {
      margin-bottom: 30px;
    }

    main header h2 {
      padding-top: 10px;
      margin-bottom: 40px;
      font-size: 40px;
      font-weight: 100;
      line-height: 1;
      font-family: "EB Garamond SemiBold", serif;
    }
    main header h2 .first-letter {
      display: inline-block;
      float: left;
      margin-right: 5px;
      font-family: "Morris Jenson Initialen", serif;
      font-weight: 500;
      font-size: 2.25em;
    }
    main header h3 {
      margin-top: 25px;
      font-size: 1.2rem;
      font-weight: normal;
      max-width: 500px;
    }
    .code-container code {
      display: flex;
      flex-grow: 1;
      max-width: 500px;
      max-height: 600px;
      overflow-y: auto;
    }

    .stats {
      display: none;
    }

    .description {
      clear: both;
      margin-top: 20px;
      font-size: 1.2em;
    }

    .feature > img {
      max-width: 100%;
      margin-bottom: 10px;
      height: auto;
    }

    body > .center > main .code-container {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      min-width: 500px;
      margin-left: 0px;
      width: 100%;
    }

    body > .center > main .code-container > .select-language > button.active {
      background: #0084ff;
      color: white;
    }
    body > .center > main .code-container > .select-language > button {
      font-size: 16px;
      border: none;
      padding: 5px 15px;
      margin-right: 5px;
      cursor:pointer;
      font-weight: bold;
      font-family: monospace;
    }

    body > .center > main .code-container > code {
      display: block;
      padding: 10px;
    }
    @media screen and (min-width: 720px) {
      body > .center > main .code-container > code {
        min-width: 500px;
      }
    }
    @media screen and (max-width: 1418px) {
      body > .center > main .code-container {
        margin-top: 20px;
      }
    }
    @media screen and (min-width: 1418px) {
      body > .center > main .code-container {
        max-width: 560px;
        margin-left: 40px;
        margin-top: 0px;
      }
    }
    @media screen and (max-width: 720px) {
      .code-container {
        margin-left: none;
        margin-top: 20px;
      }

      .code-container > code {
        min-width: none;
      }
      .col-2 {
        max-width: none;
        float: none;
        margin-bottom: 0px;
      }
      .col-1 {
        float: none;
        padding-right: 0px;
        margin-right: 0px;
        margin-bottom: 20px;
      }
      section.feature {
        flex-direction: column;
      }
      body > .center > aside {
        float: none;
        position: static !important;
      }
      header h2 {
        max-width: 500px;
        font-size: 30px;
        margin-bottom: 0px;
      }
      .feature {
        float:none;
        margin-bottom: 50px;
      }
    }
  </style>
</head>

<body>
  <div class="center">
  <aside>
    <header>
      <h1 style="display:none;">Azul GUI Framework</h1>
      <img src="./logo.svg">
    </header>
    <nav>
      <ul>
        <li class="active"><a href="$$ROOT_RELATIVE$$">overview</a></li>
        <li><a href="$$ROOT_RELATIVE$$/releases">releases</a></li>
        <li><a href="https://github.com/fschutt/azul">code</a></li>
        <li><a href="https://matrix.to/#/#azul-gui:matrix.org">chat</a></li>
        <li><a href="$$ROOT_RELATIVE$$/guide">guide</a></li>
        <li><a href="$$ROOT_RELATIVE$$/api">api</a></li>
      </ul>
    </nav>
  </aside>
  <main>
    <header>
      <h2><span class="first-letter">B</span>uilt for beauty<br/>and speed</h2>
      <h3>Cross-platform Desktop GUI framework for C, C++, Python and Rust,
      using the Mozilla WebRender rendering engine, licensed MPL-2.0</h3>
    </header>
    $$INDEX_SECTION_EXAMPLES$$
  </main>
  </div>
  <!-- <script async type="text/javascript" src="./prism_code_highlighter.js"></script> -->
  <script type="text/javascript" async>
    var examples = [
      $$JAVASCRIPT_EXAMPLES$$
    ];

    function render_example(id, new_lang) {
      var language_buttons = document.getElementsByClassName("select-language-btn-" + id);
      for (var i = language_buttons.length - 1; i >= 0; i--) {
        language_buttons[i].classList.remove("active");
      }

      if (new_lang === "c") {
        document.getElementById("code-" + id).innerHTML = examples[0][id]["code:c"];
        document.getElementById("select-language-c-" + id).classList.add("active");
      } else if (new_lang === "cpp") {
        document.getElementById("code-" + id).innerHTML = examples[0][id]["code:cpp"];
        document.getElementById("select-language-cpp-" + id).classList.add("active");
      } else if (new_lang === "rust") {
        document.getElementById("code-" + id).innerHTML = examples[0][id]["code:rust"];
        document.getElementById("select-language-rust-" + id).classList.add("active");
      } else {
        document.getElementById("code-" + id).innerHTML = examples[0][id]["code:python"];
        document.getElementById("select-language-python-" + id).classList.add("active");
      }
    }

    function select_c_code(id) {
      render_example(id, "c");
    }

    function select_cpp_code(id) {
      render_example(id, "cpp");
    }

    function select_rust_code(id) {
      render_example(id, "rust");
    }

    function select_python_code(id) {
      render_example(id, "python");
    }
  </script>
</body>
</html>
